<template>
    <div class="base-setting-main base-setting-main-not">
        <div class="base-setting-main-content">
            <div class="setting-header">
                <span class="text-left">商城端，使用SCRM的积分规则</span>
                <el-popconfirm
                    icon="WarningFilled"
                    placement="top"
                    width="200px"
                    :title="switchTitle"
                    :disabled="isDisabled"
                    @confirm="confirmSwitch">
                    <template #reference>
                        <el-switch
                            class="switch"
                            v-model="baseInfo.type"
                            :disabled="isDisabled"
                            :active-value="2"
                            :inactive-value="1"
                            :before-change="handleBeforeChange"></el-switch>
                    </template>
                </el-popconfirm>
                <span class="text-right">*开启后，商城端的积分规则失效。</span>
            </div>
            <!-- <div class="form-footer">
                <el-button type="primary" @click="onSubmit()">保存</el-button>
            </div> -->
        </div>
    </div>
</template>

<script setup>
import { onUnmounted, onMounted, reactive, ref, computed } from 'vue';
import request from '@/request/index';
import { setLayout, resetLayout } from '@/hooks/layout';
import { ElMessage } from 'element-plus';
import store from '@/store/index';

const useAuth = store.useAuthStore();
const permissions = useAuth.permissions;
// 积分商城编辑point_mail:edit 积分设置编辑point_base:edit
const isDisabled = computed(() => {
    return !permissions.has('point_base:edit');
});

const baseInfo = reactive({
    flag: false,
    type: 1
});

const onSubmit = async () => {
    let params = {
        applyType: baseInfo.type == 1 ? 2 : 1
    };
    await request('setFollowRulesServ', params);
    // ElMessage.success('保存成功');
};

const initData = async () => {
    let params = {
        rule: 1
    };
    let res = await request('getFollowRuleServ', params);
    baseInfo.type = res.data.levelFollow;
    baseInfo.flag = true;
};

const switchTitle = computed(() => {
    return baseInfo.type == 2 ? '确定关闭吗？' : '确定开启吗？';
});
const confirmSwitch = async () => {
    await onSubmit();
    baseInfo.type = baseInfo.type == 1 ? 2 : 1;
};
const handleBeforeChange = () => {
    return false;
};

onMounted(() => {
    setLayout('custom-rule-set-layout');
    initData();
});

onUnmounted(() => {
    resetLayout('custom-rule-set-layout');
});
</script>

<style lang="scss">
.custom-rule-set-layout {
    padding: 0 !important;
}
</style>
<style lang="scss" scoped>
.base-setting-main {
    position: relative;
    min-height: calc(100vh - 190px);
    &-content {
        overflow-y: auto;
        max-height: calc(100vh - 240px);
        padding: 24px;
    }
    .setting-header {
        background: #fffaf9;
        border: 1px solid #facaa8;
        display: flex;
        align-items: center;
        height: 48px;
        padding-left: 16px;
        margin-bottom: 20px;
        .text-left {
            padding-right: 6px;
        }
        .text-right {
            padding-left: 6px;
        }
    }
    .form-footer {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% + 31px);
        height: 70px;
        background-color: #fff;
        bottom: -64px;
        left: -15px;
        box-shadow: 0px 0px 10px 0px rgb(212 212 212 / 50%);
        border-radius: 2px;
        z-index: 1;
        .el-button {
            width: 80px;
        }
    }
}
.base-setting-main-not {
    min-height: calc(100vh - 145px);
}
</style>
